<template>
  <div>
    <div style="margin-top: 20px; margin-left: 20px">
      <el-button @click="compare()" :disabled="disable">对比已选择版本</el-button>
    </div>
    <div style="position: relative; left: 30px; top: 20px;">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-load-more="loadMore"
        stripe
        max-height = 700
        @selection-change="handleSelectionChange">
        <el-table-column style="width: 100%"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="备份ID"
          width="300">
          <template slot-scope="scope">
            <span style="color: #409EFF">
              <a :href="scope.row.url" target="_blank">{{scope.row.id}}</a>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="创建时间"
          width="400">
        </el-table-column>
        <el-table-column
          prop="creator"
          label="创建人"
          width="300">
        </el-table-column>
        <el-table-column
          prop="conflict"
          label="存在冲突"
          width="200">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import request from '@/utils/axios'
export default {
  name: 'CaseBackupList',
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      tableDataTotal: [],
      backupId1: '',
      backupId2: '',
      disable: true
    }
  },

  methods: {
    compare() {
      const caseId = this.$route.params.caseId
      const contractUrl = '/case/versions/history/' + caseId + '/'+ this.backupId1 + '/' + this.backupId2
      this.$router.push(contractUrl)
    },
    handleSelectionChange(val) {
      if (val.length !==2 ){
        this.disable = true
      } else {
        this.disable = false
      }
      if (val.length > 2) {
        let del_row = val.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      } else if (val.length === 2) {
        this.multipleSelection = val
        this.backupId1 = this.multipleSelection[0].id
        this.backupId2 = this.multipleSelection[1].id
      }
    },
    dateFormatYmdHMS: function (dateRc) {
      if (dateRc != null) {
        const date = new Date(dateRc)
        let year = date.getFullYear()
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
      }
    },
    getBackupByCaseId: function (caseId, beginTime=null, endTime=null) {
      let url = `/backup/getBackupByCaseId`
      request(url, {
        method: 'GET',
        params: {
          caseId: caseId
        }
      }).then(res => {
        if (res.code === 200) {
          this.tableData = []//渲染表格的变量
          this.tableDataTotal = []//存放所有数据的变量
          let tempData = res.data;
          tempData.map(item => {
            item.date = this.dateFormatYmdHMS(item.gmtCreated)
            item.url = '/case/versions/history/' + caseId + '/' + item.id
            item.conflict = item.isConflict === false? '否': '是'
            return item
          })
          if (tempData.length > 10) {
            this.tableDataTotal = tempData;//存放请求的所有数据
            this.tableData = tempData.slice(0, 15);//存放请求的前15条数据，以便初次渲染
          } else {
            this.tableData = tempData
          }
          console.log(this.tableData)
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: "error",
          duration: 5 * 1000
        });
      });
    },
    loadMore: function () {
      //1.每当触发此函数，首先拿到此时是多少条(tableNum)
      const tableNum = this.tableData.length;
      //2.再通过tableNum截取存储所有数据的tableDataTotal的后10条(next)
      let next = this.tableDataTotal.slice(tableNum, tableNum + 10);
      next.map(item => {
        //3.再push到要渲染到页面的tableData变量中去
        this.tableData.push(item);
      });
      if(next.length===0){
        this.$message.warning('已经到底啦')
      }
    }
  },
  mounted() {
    const caseId = this.$route.params.caseId
    this.getBackupByCaseId(Number(caseId))
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-table__header-wrapper .el-checkbox{
  display:none
}
</style>
